import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import DownloadItem from '../../ch/components/DownloadItem.vue'
import Btn from '../../ch/components/Btn.vue';

<Meta
  title="Components/DownloadItem"
  component={DownloadItem}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { DownloadItem },
  template:
    `
    <DownloadItem :filename="filename" :title="title" :description="description" :url="url" :type="type" :date="date" :headingLevel="headingLevel" />
    `
})

export const LargeTemplate = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { DownloadItem, Btn },
  template:
    `
    <div>
      <ul>
        <li v-for="item in content">
          <DownloadItem :filename="filename" :title="item.title" :description="item.description" :url="item.url" :type="item.type" :date="item.date" :headingLevel="headingLevel"  />
        </li>
      </ul>
      <div class="flex justify-end">
        <button type="button" class="btn btn--base btn--bare">
          <span class="btn__text">Alle Anzeigen</span>
          <svg viewBox="0 0 24 24" class="btn__icon icon icon--base">
            <path d="m16.444 19.204 4.066-7.044-4.066-7.044-.65.375 3.633 6.294h-15.187v.75h15.187l-3.633 6.294z" />
          </svg>
        </button>
      </div>
    </div>
    `
})

# DownloadItem

<Canvas>
  <Story
    name="Example"
    args={{
      filename:"dummy.pdf",
      title:"Information on the usage of websites",
      description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat augue eu purus luctus rhoncus. Donec ultricies venenatis nibh, vel placerat est accumsan quis. Maecenas urna nibh, pretium pretium odio id, rhoncus rhoncus lorem. Nulla eu neque sagittis, cursus purus eget, sodales est. Duis at ultrices odio, ac egestas dolor.",
      url:"../../../static/documents/dummy.pdf",
      type:"PDF",
      date:"13.01.2022",
      headingLevel: "h3"
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## List
Wrap multiple DownloadItems into `ul.download-items li` elements to display them as a list.
If you have a too large list (around 10 elements, depending on the content) you can use the `.button-bare` element as a clickable component to trigger a list expansion.

<Canvas>
  <Story
    name="List"
    args={{
      content: [
        {
          filename:"dummy.pdf" ,
          title:"Information on the usage of websites",
          description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat augue eu purus luctus rhoncus. Donec ultricies venenatis nibh, vel placerat est accumsan quis. Maecenas urna nibh, pretium pretium odio id, rhoncus rhoncus lorem. Nulla eu neque sagittis, cursus purus eget, sodales est. Duis at ultrices odio, ac egestas dolor.",
          url:"../../../static/documents/dummy.pdf",
          type:"PDF",
          date:"13.01.2022"
        },
        {
          filename:"image.png",
          title:"Information on the usage of websites",
          description:"",
          url:"../../../static/images/html-structure.png",
          type:"PNG",
          date:"22.01.2022"
        },
        {
          filename:"image.png",
          title:"Information on the usage of websites",
          description:"",
          url:"../../../static/images/html-structure.png",
          type:"",
          date:""
        },
      ]
    }}
  >
    {LargeTemplate.bind({})}
  </Story>
</Canvas>

# Interaction

Each DownloadItem item is it's own link, they can also be added within a list and their width is contained by the outer parent element.
During interactions, the DownloadItem items are highlighted and the user can click on them to trigger the download. The DownloadItem items are also accessible by tabbing through them.


## Download vs navigation

If the DownloadItem item points to a document placed on the same server as the application, add the `download` attribute on your link. This will download the document instead of opening it in the browser.

``` html
<a download class="download-item" href="..url-to-your-document">
  <SvgIcon icon="Download" size="xl" class="download-item__icon" />
  <div>
    <h5 class="download-item__title">Title</h5>
    <p class="download-item__description">Optional description</p>
    <p class="meta-info">
      <span class="meta-info__item">meta-info 1</span>
      <span class="meta-info__item">meta-info 2</span>
    </p>
  </div>
</a>
```

If the DownloadItem item points to an external document, a JavaScript or backend approach has to be applied.

And if the cross-origin problematic can't be solved, add a `target="_blank"` attribute on the link for a slightly better interaction.


# Headings and accessibility


## DownloadItem title
Most of the time, the title of an DownloadItem can be considered as a heading and should be marked with a `h2`, `h3` or a `h4`.

The heading level depends on the parent heading level and should respect the heading chain. For example, a `h4` heading shouldn't follow a `h2` title (use a `h3` instead).

More informations about [why heading levels should only increase by one](https://dequeuniversity.com/rules/axe/4.4/heading-order?application=axeAPI).

## Rule of thumb

__DownloadItem heading level = Parent title level + 1__

If these rules can't be applied technically, for example in a complex migration process, the best option is to __replace the heading by a `div`__. With this approach, the semantic of the titles is lost, but the content doesn't bring confusion for people using assistive technologies.

